import { useEffect, useState } from 'react'
import style from './index.module.scss'
import { GetListFnc, DeleteCateogryFnc } from '@/api/category'
import { Row, Breadcrumb, Button, Table, Tag, Modal, message } from 'antd'
import { EditOutlined, DeleteOutlined, CheckCircleTwoTone, ExclamationCircleOutlined } from '@ant-design/icons'
import AddEditBox from './components/AddEdit'


const Category = () => {
  const columns = [
    {title: '分类名称', dataIndex: 'cat_name', key: 'cat_name', width: 150},
    {title: '是否有效', dataIndex: 'cat_deleted', key: 'cat_deleted', width: 150, render: (flag: boolean) => {
      return flag === false ? <CheckCircleTwoTone twoToneColor='#339900' /> : <CheckCircleTwoTone twoToneColor='#FF0000' />
    }},
    {title: '排序', dataIndex: 'cat_level', key: 'cat_level', width: 100, render: (level: number) => levelTag(level)},
    {title: '操作', width: 220, render: (info: {cat_name: string, cat_id: number}) => {
      return (
        <>
          <Button type='primary' size='small' icon={<EditOutlined/>} onClick={() => changeDialog(true, 'edit', info.cat_name, info.cat_id)} style={{marginRight: '10px'}}>编辑</Button> 
          <Button type="primary" danger size='small' icon={<DeleteOutlined/>} onClick={() => deleteCategory(info.cat_id)}>删除</Button> 
        </>
      )
    }},
  ]
  const [dataSource, setDataSource] = useState([])  // table数据源
  const [pageNow, setPageNow] = useState(1)
  const [pageSize, setPageSize] = useState(2)
  const [isModalOpen, setIsModalOpen] = useState(false) // 添加 修改 盒子
  const [dialogType, setDialogType] = useState('') // 根据type 来判断 是修改 还是添加
  const [catName, setCatName] = useState('') // 编辑分类名称
  const [catID, setCatID] = useState(0) // 编辑分类ID

  // 表格数据初始化
  const init = async ( pageNow: number, pageSize: number) => {
    const res = await GetListFnc({type: 3, pageNum: pageNow, pageSize: pageSize})
    if(res.data.meta.status === 200) {
      setDataSource(res.data.data)
    }
  }
  useEffect(() => { init(pageNow, pageSize) }, [])

  // 更改每页数量 或者 切换当前页 给子组件使用
  const sizeCurrentChange = (current: number, pageSize: number) => {
    setPageNow(current)
    setPageSize(pageSize)
    init(current, pageSize)
  }

  // 排序tag
  const levelTag = (level: number) => {
    if(level === 0) {
      return <Tag color='blue'>一级</Tag> 
    } else if(level === 1) {
      return <Tag color='green'>二级</Tag> 
    } else {
      return <Tag color='orange'>三级</Tag> 
    }
  }

  // 添加 和 修改盒子的显示 与 隐藏
  const changeDialog = (flag: boolean, ...type: any[]) => {
    setIsModalOpen(flag)
    setDialogType(type[0])
    setCatName(type[1])
    setCatID(type[2])
  }

  // 删除分类
  const deleteCategory =  (id: number) => {
    Modal.confirm({
      icon: <ExclamationCircleOutlined />,
      content: '此操作将永久删除分类, 是否继续?',
      onOk: async () => {
        const res = await DeleteCateogryFnc(id)
        if(res.data.meta.status === 200) {
          message.success('删除成功', 1.5, () => {
            init(pageNow, pageSize)
          })
        }
      }
    })
  }

  return (
    <>
      <Breadcrumb items={[{ title: '商品管理' }, { title: '商品分类' }]} />

      <div className={style.categoryContent}>
        <Row style={{marginBottom: '20px'}}><Button type='primary' size='large' onClick={() => changeDialog(true, 'add')}>添加分类</Button></Row>

        {/* 表格数据 */}
        <Table dataSource={dataSource} columns={columns} rowKey={(record: {cat_id: number}) => record.cat_id} bordered={true} virtual scroll={{ y: 600 }}
          pagination={{current: pageNow, pageSize: pageSize, pageSizeOptions: [2,5,10], showQuickJumper: true, showSizeChanger: true, onChange: sizeCurrentChange}}
        />

        {/* 添加分类 修改分类盒子  */}
        <AddEditBox isModalOpen={isModalOpen} dialogType={dialogType} changeDialog={changeDialog} init={init} pageNow={pageNow} pageSize={pageSize} catName={catName} catID={catID}/>
      </div>
    </>
  )
}

export default Category